<!-- 个人页面 -->
<template>
  <div class="layout">
    <div class="personal">
      <div class="personal-header">
        <Information></Information>
      </div>
      <div class="personal-main">
        <Setting></Setting>
      </div>
    </div>
  </div>
  <Docker page="personal"></Docker>
</template>

<script>
import Docker from '@/components/docker'
import Information from './components/information'
import Setting from './components/setting'
//composition
export default {
  name: 'personal',
  components: { Docker, Information, Setting }
}
</script>

<style scoped lang="scss">
@import '@/styles/theme.scss';
@import '@/styles/mixin.scss';

.layout {
  @include layout-remove-docker;

  .personal {
    @include page-layout;

    &-header {
      height: 66.6667vw;
      width: 100%;
      background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
      border-bottom-left-radius: 90% 40%;
      border-bottom-right-radius: 90% 40%;
      position: relative;
    }

    &-main {
      padding: 20.5333vw 4.8vw 0;
    }
  }
}</style>